/**=========================================================
 * Directive: datepicker-range.js
 =========================================================*/

App.directive('rangeDatepicker', ['Utils',
    function(utils) {
        'use strict';
        
        return {
            restrict: 'EA',
            replace: true,
            template: function($element,$attrs){
                var optionModel = utils.isEmpty($attrs.optionModel) ? 'dateRange' : $attrs.optionModel;
                var ngModel = 'rangeDatePickers.' + optionModel;

                return '\
                    <table>\
                        <tr>\
                            <td style="padding:0 8px"><datepicker ng-model="' + ngModel + '.startDate"></datepicker></td>\
                            <td style="padding:0 8px"><span class="control-label">~</span></td>\
                            <td style="padding:0 8px"><datepicker ng-model="' + ngModel + '.endDate"></datepicker></td>\
                        </tr>\
                    </table>\
                '
            },
            link: function($scope, $element, $attrs){
                var optionModel = utils.isEmpty($attrs.optionModel) ? 'dateRange' : $attrs.optionModel;
                var ngModel = 'rangeDatePickers.' + optionModel;
                
                $scope.$watch(ngModel + ".startDate.date", 
                    function (newVal, oldVal) {                       
                        $scope.rangeDatePickers[optionModel].endDate.dateOptions.minDate = newVal;
                    }
                );
                
                $scope.$watch(ngModel + ".endDate.date", 
                    function (newVal, oldVal) {                       
                        $scope.rangeDatePickers[optionModel].startDate.dateOptions.maxDate = newVal;
                    }
                );
            }
        }
    }
]);
